<template>
	<view>
		<!-- 用户名 -->
		<view class="box">
			<view class="flex-center">
				<view class="title">
					<image mode="widthFix" class="title-icon" src="/static/img/mine/uerAvatar.svg"></image>
					<text class="title font-weight">{{username}}</text>
				</view>
			</view>
		</view>
		<!-- 个人信息 -->
		<view class="box">
			<view class="flex-center">
				<view class="title">
					<image mode="widthFix" class="title-icon" src="/static/img/mine/wdjl.svg"></image>
					<text>个人信息</text>
				</view>
				<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
			</view>
		</view>
		<!-- 投递记录 -->
		<view class="box">
			<view class="flex-center">
				<navigator class="title" url="/pages/recode/recode">
					<image mode="widthFix" class="title-icon" src="/static/img/mine/tdjl.svg"></image>
					<text>投递记录</text>
				</navigator>
				<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
			</view>
		</view>
		<!-- 联系我们 -->
		<view class="box">
			<view class="flex-center">
				<view class="title">
					<image mode="widthFix" class="title-icon" src="/static/img/mine/lxwm.svg"></image>
					<text>联系我们</text>
				</view>
				<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
			</view>
		</view>
		<!-- 常见问题 -->
		<view class="box">
			<view class="flex-center">
				<view class="title">
					<image mode="widthFix" class="title-icon" src="/static/img/mine/cjwt.svg"></image>
					<text>常见问题</text>
				</view>
				<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
			</view>
		</view>
		<!-- 法律协议 -->
		<view class="box">
			<view class="flex-center">
				<view class="title">
					<image mode="widthFix" class="title-icon" src="/static/img/mine/flxy.svg"></image>
					<text>法律协议</text>
				</view>
				<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
			</view>
		</view>
		<!-- 登录按钮 -->
		<view>
			<button @tap="login" v-if="username=='游客'" class="login" style="width: 700rpx" type="primary">登录</button>
			<button @tap="logout" v-else class="login_quit" style="width: 700rpx">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		decrypt
	} from "/hooks/encrypt.js"

	const login = () => {
		uni.navigateTo({
			url: "/pages/login/login",
		})
	}

	//用户名
	const username = ref('')

	//获取用户登录信息
	const getUserName = () => {
		username.value = "游客"
		if (uni.getStorageSync('userData') != "") {
			const userData = JSON.parse(uni.getStorageSync('userData'))
			username.value = decrypt(userData.username)
		}
	}

	//注销登录
	const logout = () => {
		uni.removeStorageSync('userData')
		uni.showToast({
			title: "退出登录成功"
		})
		getUserName()
	}

	onShow(() => {
		getUserName()
	})
</script>

<style scoped>
	.login,
	.login_quit {
		margin-top: 15px;
		border-radius: 48px;
	}

	.login_quit {
		background: orangered;
		color: white;
	}
</style>